<template>
	<view class="order-submission">
		<view class="wrapper">

			<view class="JifenClass">

				<view class="title_box" v-for="(v,i) in list" :key="v.id">
					<view class="left">
						<view class="one">

						</view>
						<view class="two">
							积分
						</view>
						<view class="three">
							<view class="three_1">
								{{v.points==null?'0':v.points}}
							</view>
							<view class="three_2">
								<view class="">
									（积分商城专用）
								</view>
								<view class="">
									{{v.modelName}}
								</view>
							</view>
						</view>
						
						<view  v-if="v.couponName != null">
							<view class="four"  v-if="v.couponName !== ''">
								{{v.couponName}}
							</view>
						</view>
				 
					</view>
					<view class="right">
						<view class="top">
							￥{{v.price}}
						</view>
						<view class="content">
							<view class="min" v-if="v.count>0" @click="HandleCount(-1,v,i)">
								-
							</view>
							<view class="min" v-else>
								-
							</view>
							<view class="num">
								{{v.count==undefined?0:v.count}}
							</view>
							<view class="plus" @click="HandleCount(1,v,i)">
								+
							</view>
						</view>
					</view>


				</view>

			</view>
			<!-- 			<view class="count_box">
				<view>数量</view>
				<view class="count">
					<view class="count_item" hover-class="hoverClass" @click="HandleCount(-1)">-</view>
					<view class="count_item">{{count}}</view>
					<view class="count_item bright" hover-class="hoverClass" @click="HandleCount(1)">+</view>
				</view>
			</view> -->

			<view class="item">
				<view>备注信息（150字以内）</view>
				<textarea v-model="remark"></textarea>
			</view>
		</view>
		<view class="wrapper" style="height: 500upx;">
			<view class="item">
				<view>支付方式</view>
				<view class="list">
					<view class="payItem acea-row row-middle" v-if="!isIntegral"
						:class="active === 'weixin' ? 'on' : ''" @click="payItem('weixin')" v-show="isWeixin">
						<view class="name acea-row row-center-wrapper">
							<view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view>
							微信支付
						</view>
						<view class="tip">微信快捷支付</view>
					</view>
					<view class="payItem acea-row row-middle" v-if="!isIntegral"
						:class="active === 'weixin' ? 'on' : ''" @click="payItem('weixin')" v-show="!isWeixin">
						<view class="name acea-row row-center-wrapper">
							<view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view>
							微信支付
						</view>
						<view class="tip">微信快捷支付</view>
					</view> 
<!-- 					<view class="payItem acea-row row-middle" v-if="!isIntegral" :class="active === 'yue' ? 'on' : ''"
						@click="payItem('yue')">
						<view class="name acea-row row-center-wrapper">
							<view class="iconfont icon-icon-test" :class="active === 'yue' ? 'bounceIn' : ''"></view>
							余额支付
						</view>
						<view class="tip">可用余额：{{ userInfo.nowMoney || 0 }}</view>
					</view> -->
					<view class="payItem acea-row row-middle" v-if="isIntegral"
						:class="active === 'integral' ? 'on' : ''" @click="payItem('integral')">
						<view class="name acea-row row-center-wrapper">
							<view class="iconfont icon-icon-test" :class="active === 'integral' ? 'bounceIn' : ''">
							</view>积分支付
						</view>
						<view class="tip">可用积分：{{ userInfo.integral || 0 }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="footer acea-row row-between-wrapper">
			<view>
				合计:
				<text class="font-color-red">￥{{ Price }}</text>

			</view>
			<view class="settlement" @click="HandleJiesuan">立即结算</view>
		</view>


		<uni-popup ref="popup" type="bottom">
			<view class="tc_box">

				<view class="tc_title">
					商品列表
				</view>
				<view class="tc_content" v-for="(v3,i) in updist">
					<view style="width: 350upx;">
						{{v3.name}}
					</view>
					<view style="color: red;width:150upx; text-align: right;" >
						x {{v3.num}}
					</view>
					<view style="color: red; width:250upx; text-align: right;" >
						￥ {{v3.price * v3.num}}
					</view>
				</view>
				
				
				<view class="tc_content">
					<view>
						共计:
					</view>
					<view style="color: red;">

					</view>
					<view style="color: red;">
						￥ {{Price}}
					</view>
				</view>
				<view class="btn22">
					<view class="btnx btn1" @click="close()">
						取消
					</view>
					<view class="btng btn1" @click="getpay()">
						确定
					</view>

				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		exchangegetAvailableList,
		orderexchangeConfirm,
		payOrder
	} from "@/api/order"
	import {
		mapGetters
	} from 'vuex'
	import {
		isWeixin
	} from '@/utils'
	import {
		payOrderHandle2,
	} from "@/libs/order";
	const NAME = 'OrderSubmission',
		_isWeixin = isWeixin()
	export default {
		data() {
			return {
				count: 1,
				list: [],
				activeclass: "color: red;border: 1px solid red;",
				Price: 0,
				_Price: 0,
				remark: "",
				modelId: "",
				updist: [],

				isIntegral: false,
				active: _isWeixin ? 'weixin' : 'yue',
				active: 'weixin' ,
				isWeixin: _isWeixin,

				from: this.$deviceType,

				orderId: "",
			}
		},



		computed: mapGetters(['userInfo', 'storeItems']),
		created() {

		},
		onShow: function() {
			this.getData()
			this.$store.dispatch('getUser', true)
		},
		methods: {

			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('top')
			},
			close() {
				this.$refs.popup.close()
			},

			getpay() {
				payOrderHandle2(this.orderId, this.active, this.from).then(res2 => {


					this.orderId = ''
					this.close()
					this.updist = []
					uni.navigateBack({

					});
				})
			},

			payItem: function(index) {
				console.log(index);
				this.active = index
			},


			HandleJiesuan() {

				if (this.updist.length == 0) {
					uni.showToast({
						title: "请选择商品",
						icon: 'none',
						duration: 2000,
					})
					return
				}

				if (this.active == "yue") {
					if (this.userInfo.nowMoney < this.Price) {
						uni.showToast({
							title: '余额不足以支付',
							icon: 'none',
							duration: 2000,
						})
						return
					}
				}
				let params = JSON.stringify(this.updist)
				orderexchangeConfirm({
					modelJson: params,
					remark: this.remark
				}).then(res => {
					if (res.status != 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000,
						})
						return
					}
					this.orderId = res.data.orderId
					this.open()


					// this.$yrouter.push({
					// 	path: "/pages/shop/Goodsduihuan/index",

					// });


				})
			},









			getData() {
				exchangegetAvailableList().then(res => {
					
					this.list = res.data
					console.log("list", res);
				})
			},
			handleCoupon(value, index) {1

				this.list.map((v, i) => {
					if (i === index) {
						v.active = true
						this._Price = v.price * this.count
						this.Price = this._Price
						this.modelId = v.id
						console.log(v);
					} else {
						v.active = false
					}
				})
				this.$forceUpdate()
			},
			HandleCount(count, v, i) {
				this.updist = []
				if (this.list[i].count == null) {
					this.list[i].count = 0
				}

				this.list[i].count = this.list[i].count + count
				let PriceDist = []
				this.list.map((v1, i1) => {
					if (v1.count > 0) {
						console.log("v1", v1);
						PriceDist.push({
							price: v1.price,
							count: v1.count
						})

						this.updist.push({
							id: v1.id,
							num: v1.count,
							name: v1.modelName,
							price: v1.price
						})
					}

				})
				console.log("this.updist", this.updist);
				this.Price = 0
				this.updist.map((v2, i2) => {
					this.Price = this.Price + v2.price * v2.num
				})
				this.Price = this.Price.toFixed(2)
				this.$forceUpdate()
			}
		}
	}
</script>




<style scoped lang="less">
	.bottomwy {
		margin-bottom: 100upx;
	}

	.btn22 {
		display: flex;
	}

	.tc_title {
		text-align: center;
	}

	.tc_content {
		padding: 40upx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #aaaaaa;
	}

	.btn1 {
		width: 300upx;
		height: 60upx;
		margin: 10upx auto;
		border-radius: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.btng {}

	.btnx {}

	.tc_box {

		background: white;
	}

	.item_2 {
		margin-top: 10upx;
		font-size: 35upx;
	}

	.item_2 {
		margin-top: 10upx;
		font-size: 25upx;
	}

	.JifenClass {
		width: 750upx;
		padding: 20upx 30rpx;
		color: white;

		.title_box {
			width: 690upx;
			height: 220upx;
			margin-bottom: 20upx;
			background: url(https://yi.qj361.com/20210813165755_ybg.png);
			background-size: 690upx 220upx;
			display: flex;

			.left {
				flex: 12;
				padding: 10upx 25upx;

				.one {
					text-align: right;

					font-size: 35upx;
					height: 35upx;
				}

				.two {
					font-size: 25upx;
				}

				.three {
					display: flex;
					align-items: center;

					.three_1 {
						font-size: 65upx;
						font-weight: 600;
						flex: 1;
					}

					.three_2 {
						flex: 1;
						overflow: hidden;
						font-size: 26upx;

						view {
							text-align: center;
						}
					}
				}

				.four {
					margin: 0 auto;
					width: 400upx;
					height: 40upx;
					text-align: center;
					font-weight: 28upx;
					color: #fd616f;
					border-radius: 10upx;
					background: linear-gradient(to right,
							rgba(255, 255, 255, 0.1),
							rgba(255, 255, 255, 0.8),
							rgba(255, 255, 255, 0.8),
							rgba(255, 255, 255, 0.8),
							rgba(255, 255, 255, 0.1),

						);
				}
			}

			.right {
				flex: 5;

				.top {
					margin-top: 10upx;
					margin-right: 20upx;
					text-align: right;
					color: #fd616f;
				}

				.content {
					margin: 75upx auto;
					color: #222222;
					border: 1px solid #686868;
					border-radius: 20upx;
					display: flex;
					width: 150upx;

					view {
						width: 50upx;
						text-align: center;
					}
				}
			}
		}

		.jifenItem {
			width: 300upx;
			height: 100upx;
			margin-top: 20upx;
			margin-right: 30upx;
			text-align: center;
			border: 1px solid #cfcfcf;
		}
	}

	.count_box {
		padding: 20upx 30rpx;
		display: flex;
		justify-content: space-between;

		.count {
			display: flex;
			border-top: 1px solid #cfcfcf;
			border-bottom: 1px solid #cfcfcf;

			.count_item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 60upx;
				height: 60upx;
				border-left: 1px solid #000000;
			}

			.hoverClass {
				background: #F0F0F0;
			}
		}
	}

	.bright {
		border-right: 1px solid #000000;
	}


	.order-submission .wrapper .shipping select {
		color: #999;
		padding-right: 0.15 * 100rpx;
	}

	.order-submission .wrapper .shipping .iconfont {
		font-size: 0.3 * 100rpx;
		color: #515151;
	}

	.order-submission .allAddress {
		width: 100%;
		background-image: linear-gradient(to bottom, #eb3729 0%, #eb3729 100%);
		background-image: -webkit-linear-gradient(to bottom, #eb3729 0%, #eb3729 100%);
		background-image: -moz-linear-gradient(to bottom, #eb3729 0%, #eb3729 100%);
		padding-top: 1 * 100rpx;
	}

	.order-submission .allAddress .nav {
		margin: 0 auto;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.order-submission .allAddress .nav .item {
		flex: 1;
		position: relative;
	}

	.order-submission .allAddress .nav .item.on {
		position: relative;
	}

	.order-submission .allAddress .nav .item.on:before {
		position: absolute;
		bottom: 0;
		content: '快递配送';
		font-size: 0.28 * 100rpx;
		display: block;
		height: 0;
		left: 0;
		right: 0;
		border-width: 0.4 * 100rpx;
		border-style: solid;
		border-color: #fff;
		z-index: 9;
		text-align: center;
		line-height: 0.14 * 100rpx;
	}

	.order-submission .allAddress .nav .item:nth-of-type(2).on:before {
		content: '到店自提';
		border-width: 0.4 * 100rpx;
	}

	.order-submission .allAddress .nav .item.on2 {
		position: relative;
	}

	.order-submission .allAddress .nav .item.on2:before {
		position: absolute;
		bottom: 0;
		content: '到店自提';
		font-size: 0.28 * 100rpx;
		display: block;
		height: 0;
		left: 0;
		right: 0;
		border-width: 0.4 * 100rpx;
		border-style: solid;
		border-color: #d5e6e6;
		text-align: center;
		line-height: 0.14 * 100rpx;
	}

	.order-submission .allAddress .nav .item:nth-of-type(1).on2:before {
		content: '快递配送';
		border-width: 0.4 * 100rpx;
	}

	.order-submission .allAddress .address {
		width: 6.91 * 100rpx;
		height: 1.5 * 100rpx;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.order-submission .allAddress .line {
		width: 7.1 * 100rpx;
		margin: 0 auto;
	}

	.order-submission .wrapper .item .discount input::placeholder {
		color: #ccc;
	}
</style>
